<template>
    <div class="upload-container">
        <el-button
                :style="{background: color, borderColor: color}"
                icon="el-icon-upload"
                size="mini"
                type="primary"
                @click=" dialogVisible=true"
        >
            upload
        </el-button>
        <el-dialog :visible.sync="dialogVisible">
            <el-upload
                    :on-remove="handleRemove"
                    :on-change="onChangeFile"
                    :file-list="mFileList"
                    :auto-upload="false"
                    action="string"
                    :multiple="true"
                    :show-file-list="true"
                    class="editor-slide-upload"
                    list-type="picture-card"
            >
                <el-button
                        size="small"
                        type="primary"
                >
                    Click upload
                </el-button>
            </el-upload>
            <!--            <el-upload-->
            <!--                    :multiple="true"-->
            <!--                    :file-list="defaultFileList"-->
            <!--                    :show-file-list="true"-->
            <!--                    :on-remove="handleRemove"-->
            <!--                    :on-success="handleSuccess"-->
            <!--                    :before-upload="beforeUpload"-->
            <!--                    class="editor-slide-upload"-->
            <!--                    action="https://httpbin.org/post"-->
            <!--                    list-type="picture-card"-->
            <!--            >-->
            <!--                <el-button-->
            <!--                        size="small"-->
            <!--                        type="primary"-->
            <!--                >-->
            <!--                    Click upload-->
            <!--                </el-button>-->
            <!--            </el-upload>-->
            <el-button @click="dialogVisible = false">
                Cancel
            </el-button>
            <el-button
                    type="primary"
                    @click="handleSubmit"
            >
                Confirm
            </el-button>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator'
    import {errorMsg} from "@/core/utils/message";
    import {UploadImage} from "@/components/Tinymce/components/type";


    /**
     * 图片上传组件
     */
    @Component({
        name: 'EditorImageUpload'
    })
    export default class TinymceEditorImage extends Vue {
        fileList = [];

        get mFileList() {
            if (this.fileList) {
                return this.fileList;
            }
            return []
        }

        set mFileList(val: any) {
            this.$emit('update:fileList', val)
        }

        private config: any = {'Content-Type': 'multipart/form-data'};


        handleRemove(file: any, fileList: any) {
            this.nowFileData(fileList);
            ////////console.log("onChangeFile  fileList.Size", fileList.length);

        }

        onChangeFile(file: any, fileList: any) {
            if (file.size > 1 * 1024 * 1024) {
                this.cancel(fileList, "上传文件超出限制大小" + 1 + "M");
                return;
            }

            ////console.log("onChangeFile  fileList.Size", fileList.length);
            let formData = new FormData();
            fileList.forEach((file: any) => {
                if (file.raw instanceof Blob) {
                    formData.append("files", file.raw, file.name);
                }
            });

            // $http.post(API.adminUploadUrl, formData, this.config).then((res: any) => {
            //     if (res.success) {
            //         this.nowFileData(this.fileList.concat(addBaseUrl(res.data)));
            //     } else {
            //         let filter = fileList.filter((item: any) => {
            //             return !(file.raw instanceof Blob);
            //         });
            //         this.nowFileData(filter);
            //     }
            // });
        }

        dataArray: any = [];

        nowFileData(fileList: any) {
            //设置详情
            this.dataArray = [];
            // //console.log("fileList--nowFileData", JSON.stringify(fileList));
            fileList.forEach((file: any) => {
                // //console.log("getPath--getPath", JSON.stringify(file));
                this.dataArray.push({
                    uid: file.id,
                    url: file.fullUrl,
                    name: file.name,
                    hasSuccess: true,
                    width: 249,
                    height: 249
                });
            });
            //console.log("dataArray", this.dataArray);
            return this.dataArray;
        }

        cancel(fileList: any, message: any) {
            errorMsg(message);
            let filter = fileList.filter((item: any) => {
                return !(item.raw instanceof Blob);
            });
            this.nowFileData(filter);
        }


        @Prop({required: true}) private color!: string;

        private dialogVisible = false;
        private listObj: { [key: string]: UploadImage } = {};
        private defaultFileList = [];

        private checkAllSuccess() {
            return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
        }

        private handleSubmit() {
            const arr = Object.keys(this.listObj).map(v => this.listObj[v]);
            if (!this.checkAllSuccess()) {
                this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
                return
            }
            this.$emit('successCBK', this.dataArray);
            this.fileList = [];
            this.dataArray = [];
            this.listObj = {};
            this.defaultFileList = [];
            this.dialogVisible = false
        }

    }
</script>

<style lang="scss">
    .editor-slide-upload {
        .el-upload--picture-card {
            width: 100%;
        }
    }
</style>

<style lang="scss" scoped>
    .editor-slide-upload {
        margin-bottom: 20px;
    }
</style>
